<template>
  <div class="laptop">
    <div class="brands">
      <ul class="brand-list">
        <li class="brand-item">
          <router-link class="d-bloak" to="#">
            <p class="brand-icon pg"></p>
            <p>苹果</p>
          </router-link>
        </li>
        <li class="brand-item">
          <router-link class="d-bloak" to="#">
            <p class="brand-icon hw"></p>
            <p>联想</p>
          </router-link>
        </li>
        <li class="brand-item">
          <router-link class="d-bloak" to="#">
            <p class="brand-icon xm"></p>
            <p>戴尔</p>
          </router-link>
        </li>
        <li class="brand-item">
          <router-link class="d-bloak" to="#">
            <p class="brand-icon ry"></p>
            <p>小米</p>
          </router-link>
        </li>
      </ul>
      <ul class="brand-list brand-list2">
        <li class="brand-item">
          <router-link class="d-bloak" to="#">
            <p class="brand-icon oppo"></p>
            <p>惠普</p>
          </router-link>
        </li>
        <li class="brand-item">
          <router-link class="d-bloak" to="#">
            <p class="brand-icon sx"></p>
            <p>华为</p>
          </router-link>
        </li>
        <li class="brand-item">
          <router-link class="d-bloak" to="#">
            <p class="brand-icon vivo"></p>
            <p>华硕</p>
          </router-link>
        </li>
        <li class="brand-item">
          <router-link class="d-bloak" to="#">
            <p class="brand-icon more"></p>
            <p>更多</p>
          </router-link>
        </li>
      </ul>
      <br />
      <mt-button type="danger" size="large" class="f-s">免费估价</mt-button>
    </div>
    <!-- 猜你想卖 -->
    <div class="uwant">
      <ul class="uwant-list">
        <li class="uwant-item">
          <router-link to="#" class="d-block">
            <p class="uwant-pic p1">
              <img
                width="100%"
                src="/img/index/20201014094047_8033.jpeg"
                alt=""
              />
            </p>
            <p class="uwant-title">苹果 iPhone 12 Pro Max</p>
            <p class="uwant-price">
              <span class="rmb-icon">￥</span
              ><span class="rmb-color">4800</span>
            </p>
            <p class="highest-price">最高回收价</p>
          </router-link>
        </li>
        <li class="uwant-item">
          <router-link to="#" class="d-block">
            <p class="uwant-pic p1">
              <img
                width="100%"
                src="/img/index/20201014093450_1221.jpeg"
                alt=""
              />
            </p>
            <p class="uwant-title">苹果 iPhone 12 Pro Max</p>
            <p class="uwant-price">
              <span class="rmb-icon">￥</span
              ><span class="rmb-color">4800</span>
            </p>
            <p class="highest-price">最高回收价</p>
          </router-link>
        </li>
        <li class="uwant-item">
          <router-link to="#" class="d-block">
            <p class="uwant-pic p1">
              <img
                width="100%"
                src="/img/index/20201014092909_3512.jpeg"
                alt=""
              />
            </p>
            <p class="uwant-title">苹果 iPhone 12 Pro Max</p>
            <p class="uwant-price">
              <span class="rmb-icon">￥</span
              ><span class="rmb-color">4800</span>
            </p>
            <p class="highest-price">最高回收价</p>
          </router-link>
        </li>
        <li class="uwant-item">
          <router-link to="#" class="d-block">
            <p class="uwant-pic p1">
              <img
                width="100%"
                src="/img/index/20201014092233_6118.jpeg"
                alt=""
              />
            </p>
            <p class="uwant-title">苹果 iPhone 12 Pro Max</p>
            <p class="uwant-price">
              <span class="rmb-icon">￥</span
              ><span class="rmb-color">4800</span>
            </p>
            <p class="highest-price">最高回收价</p>
          </router-link>
        </li>

        <li class="uwant-item">
          <router-link to="#" class="d-block">
            <p class="uwant-pic p1">
              <img
                width="100%"
                src="/img/index/20200306175213_62494.jpg"
                alt=""
              />
            </p>
            <p class="uwant-title">苹果 iPhone 12 Pro Max</p>
            <p class="uwant-price">
              <span class="rmb-icon">￥</span
              ><span class="rmb-color">4800</span>
            </p>
            <p class="highest-price">最高回收价</p>
          </router-link>
        </li>
        <li class="uwant-item">
          <router-link to="#" class="d-block">
            <p class="uwant-pic p1">
              <img
                width="100%"
                src="/img/index/20200306175213_62494.jpg"
                alt=""
              />
            </p>
            <p class="uwant-title">苹果 iPhone 12 Pro Max</p>
            <p class="uwant-price">
              <span class="rmb-icon">￥</span
              ><span class="rmb-color">4800</span>
            </p>
            <p class="highest-price">最高回收价</p>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 速回收资讯 -->
    <div class="shs-information">
      <p class="title">速回收资讯</p>
          <div class="information-item">
            <router-link to="#" class="d-block information-content">
              <div class="information-img">
                <img
                  width="100%"
                  src="/img/index/20210325181334_9622.jpeg"
                  alt=""
                />
              </div>
              <div class="content">
                <div class="title">标题</div>
                <div class="details">这里是简介</div>
              </div>
            </router-link>
          </div>
                    <div class="information-item">
            <router-link to="#" class="d-block information-content">
              <div class="information-img">
                <img
                  width="100%"
                  src="/img/index/20210325181334_9622.jpeg"
                  alt=""
                />
              </div>
              <div class="content">
                <div class="title">标题</div>
                <div class="details">这里是简介</div>
              </div>
            </router-link>
          </div>
                    <div class="information-item">
            <router-link to="#" class="d-block information-content">
              <div class="information-img">
                <img
                  width="100%"
                  src="/img/index/20210325181334_9622.jpeg"
                  alt=""
                />
              </div>
              <div class="content">
                <div class="title">标题</div>
                <div class="details">这里是简介</div>
              </div>
            </router-link>
          </div>
    </div>
    
  </div>
</template>
<style lang="scss">
.laptop {
  padding: 0 10px;
  margin-bottom: 56px;
  background: #f7f4f8;
  border-radius: 12px;
  // 品牌类别
  .brands {
    width: 100%;
    height: 250px;
    margin-top: 25px;
    background: #fff;
    .brand-list2 {
      margin-top: 20px;
    }
    .brand-list {
      display: flex;
      justify-content: space-around;
      .brand-item {
        .d-bloak {
          display: block;
          text-align: center;
          .brand-icon {
            width: 45px;
            height: 45px;
            margin-bottom: 20px;
            background: url("/img/index/20200318143021_6490.png");
            background-size: 323px 657px;
          }
          .pg {
            background-position: 0 -175px;
          }
          .hw {
            background-position: -92px -175px;
          }
          .xm {
            background-position: -186px -175px;
          }
          .ry {
            background-position: -278px -175px;
          }
          .oppo {
            background-position: 0 -262px;
          }
          .sx {
            background-position: -92px -262px;
          }
          .vivo {
            background-position: -186px -262px;
          }
          .more {
            background-position: -278px -262px;
          }
          p:last-child {
            color: #000;
            font-size: 14px;
          }
        }
      }
    }
    .f-s {
      width: 90%;
      margin: auto;
      font-size: 14px;
    }
  }
  // 猜你想卖
  .uwant {
    width: 100%;
    margin-top: 15px;
    height: 320px;
    background: #fff;
    border-radius: 12px;
    .uwant-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .uwant-item {
        width: 30%;
        .d-block {
          display: block;
          display: flex;
          margin: 10px 0;
          flex-direction: column;
          align-items: center;
          color: #000;
        }
        .uwant-pic {
          width: 46px;
          height: 46px;
          background: #000;
        }

        .uwant-title {
          width: 100%;
          margin: 15px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .uwant-price {
          margin: 5px 0 5px 0;
          .rmb-icon {
            font-size: 12px;
          }
          .rmb-color {
            font-size: 18px;
            color: #f74444;
          }
        }
        .highest-price {
          font-size: 14px;
        }
      }
    }
  }
  // 速回收资讯
  .shs-information{
    .title{
      margin: 15px 0;
      font-weight: 800;
      font-size: 16px;
    }

            .information-item {
          width: 95%;
          margin: 0 auto;
          height: 78px;
          border-radius: 0.6rem;
          margin-top: 10px;
          background: #fff;
          .d-block {
            display: block;
            display: flex;
            color: #000;
            padding: 0 10px;
            justify-content: space-between;
            align-items: center;
            .details{
              color: #999;
              font-size: 13px;
            }
          }
          .information-img {
            width: 70px;
            height: 60px;
          }
          .content {
            width: 217px;
            height: 78px;
            .title {
              height: 20px;
              margin-top: 10px;
              margin-bottom: 10px;
            }
            .details {
              height: 55px;
            }
          }
        }
  }
}
</style>